<template>
  <div class="realtimeNwdl">
    <!-- /搜索栏 -->
    <div class="search-bar">
      <div class="status-stats">
        <div class="status-item" 
          v-for="item in statusList" 
          :key="item.value"
          :class="{ active: statusValue === item.label }"
          @click="handleStatusClick(item)">
          <span class="label">{{ item.label }}</span>
          <span class="count">({{ total[item.key] || 0 }})</span>
        </div>
      </div>

      <div class="input">
        <CustomSelect
          v-model="searchValue.deptName"
          placeholder="选择镇街搜索"
          valKey="label"
          :optionList="filteredTownList"
          @on-change="inputChange" />
      </div>

      <div class="input">
        <CustomInput
          v-model="searchValue.stationName"
          placeholder="输入站点名称搜索"
          @on-enter="inputChange" />
      </div>

      <div class="btn">
        <CustomButton
          type="primary"
          icon="ios-search"
          @click="inputChange">搜索</CustomButton>
      </div>
    </div>
    <!-- /搜索栏 -->

    <!-- /表格 -->
    <div class="table-box">
      <CustomTable
        ref="JTable"
        list-url="/GmnwApi/deviceRealRecord/list"
        axiosMethods="GET"
        :isAutoLoad="true"
        :showElevator="false"
        :columns="columns"
        :is-pages="true"
        :border="true"
        :search-value="searchValue"
        :height="tableHeight"
        @handleData="handleTableData" />
    </div>
    <!-- /表格 -->

    <actionDrawer
      ref="actionDrawer"
      @refreshTable="inputChange" />
  </div>
</template>

<script>
import actionDrawer from './child/actionDrawer'
import { mapActions, mapMutations, mapState } from 'vuex'
import { townList  } from 'common/js/modules'
import { columns } from './js/modules'

export default {
  components: {
    actionDrawer
  },
  computed:{
    ...mapState({
      total: state => state.realtimeNwdl.total
    })
  },
  created () {
    this.interval = null
    this.getTotal()
    this.townList = townList()
    this.filteredTownList = this.townList.filter(item => item.value.indexOf('440607') > -1)
    this.columns = columns(this)
    this.initTableHeight()
    this.initInterval()
    window.addEventListener('resize', this.handleResize)
  },
  data () {
    return {
      filteredTownList: [],
      statusValue: '全部',
      searchValue: {
        stationName: '',
        deptName: '',
        deviceStatus: ''
      },
      tableHeight: 600,
      originalData: [], // 存储原始数据
      filteredData: [], // 存储筛选后的数据
      statusList: [
        { label: '全部', key: 'total' },
        { label: '在线', key: 'online' },
        { label: '离线', key: 'offline' },
      ]
    }
  },
  methods: {
    initInterval () {
      clearInterval(this.interval)
      
      this.interval = setInterval(() => {
        this.refreshTable()
        this.refreshTotal()
      }, 300000)
    },
    initTableHeight () {
      this.tableHeight = window.innerHeight - 180
    },
    handleResize () {
      this.initTableHeight()
    },

    refreshTotal  () {
      this.getTotal()
    },
    refreshTable () {
      this.$refs.JTable._getList()
    },
    inputChange () {
      this.refreshTable()
      this.refreshTotal()
      this.initInterval()
    },
    handleStatusClick (item) {
      this.statusValue = item.label

      if (item.label === '全部') {
        delete this.searchValue.deviceStatus
      } else {
        this.searchValue.deviceStatus = item.label
      }

      this.$nextTick(() => {
        this.refreshTable()
        this.refreshTotal()
        this.initInterval()
      })
    },
    handleTableData (res) {
      if (res) {
        this.originalData = res.list || []
        this.filteredData = [...this.originalData]
        if (res.statusCount) {
          this.statusList.forEach(item => {
            item.count = res.statusCount[item.value] || 0
          })
        }
      }
    },
    getTotal () {
      const data = {}

      if (this.searchValue.deptName) {
        data.deptName = this.searchValue.deptName
      }

      if (this.searchValue.stationName) {
        data.stationName = this.searchValue.stationName
      }

      this.GET_TOTAL(data)
    },
    setFaZhi (row) {
      this.SET_FORMINFO(row)
      this.$refs['actionDrawer'].showDrawer()
    },
    ...mapMutations({
      'SET_FORMINFO': 'realtimeNwdl/SET_FORMINFO'
    }),
    ...mapActions({
      'GET_TOTAL': 'realtimeNwdl/GET_TOTAL'
    })
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.handleResize)
  }
}
</script>

<style lang="scss" scoped>
.realtimeNwdl {
  width: 100%;
  height: 100%;
  position: relative;
  padding-top: 10px;
  box-sizing: border-box;
  > .search-bar {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 0 10px;
    > .status-stats {
      flex: 1;
      display: flex;
      gap: 3px;
      padding: 8px 0;
      .status-item {
        cursor: pointer;
        color: #666;
        font-size: 14px;
        transition: all 0.3s ease;
        padding: 4px 8px;
        border-radius: 4px;
        border: 1px solid transparent;
        &:hover {
          transform: translateY(-2px);
        }
        &.active {
          font-weight: bold;
          background-color: rgba(45, 140, 240, 0.1);
          border-color: currentColor;
        }
        &:nth-child(1) { // 全部
          color: #666;
          &.active, &:hover { color: #2d8cf0; }
        }
        &:nth-child(2) { // 在线
          color: #19be6b;
          &.active, &:hover { color: #19be6b; }
        }
        &:nth-child(3) { // 离线
          color: #ed4014;
          &.active, &:hover { color: #ed4014; }
        }
        .label {
          text-align: center;
        }
        .count {
          margin-left: 4px;
          opacity: 0.8;
          text-align: center;
        }
      }
    }
    > .input {
      flex: 0 0 200px;
      margin-right: 10px;
    }
  }
  > .table-box {
    width: 100%;
    height: calc(100% - 42px);
    position: relative;
    padding: 0 10px;
    overflow-y: auto;
    overflow-x: hidden;
  }
}
</style>
